<template>
  <div>
    <el-button type="primary" @click="$router.go(-1)">返回</el-button>
    <div id="yuannei" style="background: #fff; padding: 40px">
      <div class="yuannei-t">仓库出库单</div>
      <br />
      <el-row type="flex" class="yuannei-time" justify="space-between">
        <el-col style="text-align: left" :span="12"
          >出库单号：{{ this.$route.query.num }}</el-col
        >
        <el-col style="text-align: right" :span="12"></el-col>
      </el-row>
      <table class="my-table">
        <tr>
          <td style="height: 40px" class="common-d">仓库：</td>
          <td colspan="5">{{ getType(this.warehouse) }}</td>
          <td class="common-d">出库申请时间</td>
          <td colspan="5">{{ this.inboundFillTime }}</td>
        </tr>
      </table>
      <table class="my-table">
        <thead>
          <tr>
            <td class="common-d">序号</td>
            <td style="height: 40px" class="common-d">货品编号</td>
            <td class="common-d">货品名称</td>
            <td class="common-d">型号规格</td>
            <td class="common-d">单位</td>
            <td class="common-d">数量</td>
            <td class="common-d">出库时间</td>
            <td class="common-d">出库原因</td>
            <td class="common-d">领料人</td>
            <td class="common-d">审核人</td>
            <td class="common-d">备注</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(comment, index) in this.obj" :key="index">
            <td class="common-d">{{ index + 1 }}</td>
            <td class="common-d" style="height: 40px">{{ comment.goodsId01 }}</td>
            <td class="common-d">{{ comment.goodsName }}</td>
            <td class="common-d">{{ comment.specification }}</td>
            <td class="common-d">{{ comment.goodsUnit }}</td>
            <td class="common-d">{{ comment.outboundGoodsNumber }}</td>
            <td class="common-d">{{ comment.outboundTime }}</td>
            <td class="common-d">{{ comment.outboundReason }}</td>
            <td class="common-d">{{ comment.outboundPeople }}</td>
            <td class="common-d">{{ comment.outboundSubPeople }}</td>
            <td class="common-d">{{ comment.outboundRemarks }}</td>
          </tr>
        </tbody>
        <tr>
          <td style="height: 40px" class="common-d" colspan="2">
            出库领料人签字：
          </td>
          <td colspan="4"></td>
          <td class="common-d" colspan="2">出库审核人签字：</td>
          <td colspan="4"></td>
        </tr>
      </table>

      <div @click="print" class="print-btn">打印</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      query: {
        currentPage: 0,
        pageSize: 0,
        num: "",
        warehouse: 1
      },
      warehouse: "",
      inboundFillTime: "",
      obj: {
        warehouse: "",
        goodsId01: "",
        goodsName: "",
        specification: "",
        goodsUnit: "",
        inboundGoodsNumber: "",
        inboundType: "",
        inboundRemarks: "",
        waringValue: "",
        goodsPrime: "",
        inboundPeople: "",
        inboundSubPeople: "",
        inboundFillTime: "",
        inboundSubTime: "",
        inboundTime: ""
      }
    };
  },
  created() {
    const that = this;
    that.warehouse = that.$route.query.warehouse;
    that.getData(that.$route.query.num);
    that.inboundFillTime = that.$route.query.inboundFillTime;
    // console.log(4545, that.warehouse);
    // console.log(4545, that.inboundFillTime);
  },
  methods: {
    getType(type) {
      const warehousetype = {
        1: "防汛仓库",
        2: "备品备件仓库"
      };
      return type
        .split(",")
        .map(c => warehousetype[c])
        .join(",");
    },
    print() {
      $("#yuannei").printArea();
    },
    async getData(num) {
      this.query.num = num
      const that = this;
      const res = await this.$http.post(
        `/restful/v1/dd/outbound/getOutboundNumDetail`,
        that.query
      );
      that.obj = res.data.object.dataList;
      this.total = res.data.object.page.totalSize;
    }
  }
};
</script>
<style lang="less" scoped>
.my-table {
  background: #fff;
  border: 1px solid #cad9ea;
  color: #666;
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}
.my-table td {
  font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #4f6b72;
  border-right: 1px solid #c1dad7;
  border-bottom: 1px solid #c1dad7;
  border-top: 1px solid #c1dad7;
  padding: 6px 6px 6px 12px;
}
.yuannei-t {
  font-size: 22px;
  line-height: 30px;
  text-align: center;
}
.yuannei-sub {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.yuannei-time {
  padding: 0 30px;
  font-size: 14px;
  line-height: 36px;
}
.common-d {
  width: 120px;
  text-align: center;
  vertical-align: middle;
}
.yuannei-line {
  border-bottom: 1px #000 dashed;
  margin: 40px 0;
}
.print-btn {
  cursor: pointer;
  height: 60px;
  width: 60px;
  color: #fff;
  position: fixed;
  top: 50%;
  right: 40px;
  border-radius: 50%;
  line-height: 60px;
  text-align: center;
  background: #306ae5;
}
</style>
